<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <title>地图显示</title>
    <style>
        html,
        body,
        #container {
          width: 100%;
          height: 90%;
        }
        input {
            width: 200px !important;
            margin: 10px;
        }
        button {
            margin-left:10px;
        }
    </style>
</head>
<body>
<!--<div>-->
<!--    <input type="text" placeholder="您在哪儿上车？ " />-->
<!--    <button class="nowBtn">定位</button> 实战自动定位（这里单击设置假定位数据）-->
<!--</div>-->

<!--<div>-->
<!--    <input type="text" placeholder="您要去哪儿？" />-->
<!--    <button>确定</button>-->
<!--</div>-->
<div id="container"></div>
<!-- 加载地图JSAPI脚本 -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=4eb50d5b6bc7611a7f6123683d856a25&plugin=AMap.Geocoder"></script>
<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: "a75ddefa66929d04dd9864b60c66193b",
    }
</script>
<script src="https://webapi.amap.com/maps?v=2.0&key=72c772acf17e073f42cfff06975ff3e0&plugin=AMap.Geocoder"></script>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:20, //初始化地图层级
        center: [116.397428, 39.90323] //初始化地图中心点
    });

    let marker = null

    document.querySelector('.nowBtn').onclick = () => {
        // 1、清除之前的
        map.clearMap()
        // 2 重新打点
         marker = new AMap.Marker({
            // icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            content:`<div class="address" style="min-width:140px;text-align:center;display:flex;align-items: center;flex-direction:column">
                <div class="address-title" style="padding:10px;border-radius:100px;background:black;color:#fff;font-size:14px;">千锋教育&nbsp;&nbsp;&gt;</div>
                <div class="address-bottom" style="width:4px;height:15px;background:black;"></div>
            </div>`,
            position: [116.397428, 39.90323],
            anchor:'bottom-center'
        });
        map.add(marker)
    }


    map.on('mapmove',()=>{
        // 1、获取中心点
        const curCenter = map.getCenter(); // 获取地图最新的中心点坐标
        // console.log('当前中心点：', curCenter);
        // 2、更新标记位置
        if (marker) marker.setPosition(curCenter);
        // 3、更新标记名字
        const geocoder = new AMap.Geocoder({
            // city: '020',//城市设为北京，默认：“全国”
            extensions: 'base' // 逆地理编码时，返回信息的详略
        })
        geocoder.getAddress([curCenter.lng, curCenter.lat],(status,result) => {
            if(status === 'complete' && result.info === 'OK'){
                console.log('result', result)
                const { city, province, district, township } = result.regeocode.addressComponent;
                console.log(`${province}${city}${district}`)
                const address = result.regeocode.formattedAddress.replace(`${province}${city}${district}${township}`,'')
                marker.setContent(`<div class="address" style="min-width:140px;text-align:center;display:flex;align-items: center;flex-direction:column">
                    <div class="address-title" style="padding:10px;border-radius:100px;background:black;color:#fff;font-size:14px;">${address}&nbsp;&nbsp;&gt;</div>
                    <div class="address-bottom" style="width:4px;height:15px;background:black;"></div>
                </div>`); // 修改内容
                marker.setPosition(curCenter); // 修改位置
            } else {
                console.log('err', status, result);
            }
        })
        // end 3
    })

</script>
</body>
</html>